<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header style="display: flex; justify-content: space-between; align-items: center;">
      <div>毛孩乐园</div>
      <div style="display: flex; align-items: center;">
        <el-dropdown style="margin-right: 20px;">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-user">个人主页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-avatar :size="40" :src="circleUrl"></el-avatar>
      </div>
    </el-header>

    <!-- 主体区域 -->
    <el-container>
      <!-- 侧边栏菜单 -->
      <el-aside style="width: 200px; background-color: #f2f2f2;">
          <el-menu default-active="5" class="el-menu-vertical-demo">
            <template v-if="userType === '02'">
              <router-link to="/goods">
                <el-menu-item index="2">
                  <i class="el-icon-goods"></i>
                  <template slot="title">商品管理</template>
                </el-menu-item>
              </router-link>
              <router-link to="/video">
                <el-menu-item index="4">
                  <i class="el-icon-video-camera"></i>
                  <template slot="title">视频管理</template>
                </el-menu-item>
              </router-link>
              <router-link to="/order">
                <el-menu-item index="5">
                  <i class="el-icon-tickets"></i>
                  <template slot="title">订单管理</template>
                </el-menu-item>
              </router-link>
              <router-link to="/data">
                <el-menu-item index="6">
                  <i class="el-icon-data-analysis"></i>
                  <template slot="title">统计数据</template>
                </el-menu-item>
              </router-link>
            </template>
            <template v-else>
              <router-link to="/shop">
                <el-menu-item index="1">
                  <i class="el-icon-takeaway-box"></i>
                  <template slot="title">商店管理</template>
                </el-menu-item>
              </router-link>
              <router-link to="/user">
                <el-menu-item index="3">
                  <i class="el-icon-user"></i>
                  <template slot="title">会员管理</template>
                </el-menu-item>
              </router-link>
            </template>
          </el-menu>
        </el-aside>
      <!-- 主要内容区域 -->
      <el-main>
        <!-- 搜索表单 -->
        <div style="margin-bottom: 20px;">
          <el-form ref="searchForm" :model="searchForm" :inline="true" style="display: flex; align-items: center;">
            <el-form-item>
              <el-input v-model="searchForm.keyword" placeholder="请输入搜索内容..." style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" icon="el-icon-plus" @click="openCreateForm">新增</el-button>
              <el-dialog
                  title="新增数据"
                  :visible.sync="dialogVisible1"
                  width="30%">
                <el-form :model="formData" ref="formData" label-width="80px">
                  <el-form-item label="商店名称">
                    <el-input v-model="formData.shopName"></el-input>
                  </el-form-item>
                  <el-form-item label="描述">
                    <el-input v-model="formData.description"></el-input>
                  </el-form-item>
                  <el-form-item label="电话号码">
                    <el-input v-model="formData.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                    <el-input v-model="formData.address"></el-input>
                  </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
                  <el-button type="primary" @click="addData">确 定</el-button>
                  <el-button @click="dialogVisible1 = false">取 消</el-button>
                </span>
              </el-dialog>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据表格 -->
        <div>
          <el-table :data="pagedTableData" stripe style="width: 100%;">
            <el-table-column prop="shopName" label="商店名称" width="180"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="phone" label="电话号码"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center;">
                  <el-button type="text" @click="editData(scope.row)">编辑</el-button>
                  <el-dialog
                      title="编辑数据"
                      :visible.sync="dialogVisible"
                      width="30%">
                    <el-form :model="formData" ref="formData" label-width="80px">
                      <el-form-item label="商店名称">
                        <el-input v-model="formData.shopName"></el-input>
                      </el-form-item>
                      <el-form-item label="描述">
                        <el-input v-model="formData.description"></el-input>
                      </el-form-item>
                      <el-form-item label="电话号码">
                        <el-input v-model="formData.phone"></el-input>
                      </el-form-item>
                      <el-form-item label="地址">
                        <el-input v-model="formData.address"></el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
                      <el-button type="primary" @click="UpdateData">确 定</el-button>
                      <el-button @click="dialogVisible = false">取 消</el-button>
                    </span>
                  </el-dialog>
                  <el-button type="text" @click="deleteData(scope.$index)" style="margin-left: 10px;">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
            </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      dialogVisible: false,
      dialogVisible1: false,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      tableData: [], // 原始表格数据 
      dialogTitle: '',
      formData: {
        shopId: '', // 新增时为null，编辑时为当前行的id
        shopName: '',
        description: '',
        phone: '',
        address: ''
      },
      searchForm: {
        keyword: ''
      },
      showSearchResults: false,
      userType: localStorage.getItem('userType'), // 获取用户类型
    };
  },
  mounted() {
    this.loadShops();
  },
  computed: {
    filteredTableData() {
      // 确保 tableData 是一个数组
      if (!this.searchForm.keyword.trim()) {
        return this.tableData;
      }
      
      const keyword = this.searchForm.keyword.toLowerCase().trim();
      return this.tableData.filter(item => {
        // 确保 item 对象存在，并且 shopName、description、createTime 不是 undefined 或 null
        return item &&
          (item.shopName && item.shopName.toLowerCase().includes(keyword)) ||
          (item.description && item.description.toLowerCase().includes(keyword)) ||
          (item.createTime && item.createTime.toLowerCase().includes(keyword));
      });
    },
    pagedTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.filteredTableData.slice(start, end);
    }
  },
  methods: {
    
    loadShops() {
      request.get('/shop/all').then(response => {
        this.tableData = response.data || []; // 确保响应数据是数组，如果不是则设置为空数组
      }).catch(error => {
        console.error('Error loading shops:', error);
      });
    },
    search() {
  this.showSearchResults = true;
  // 发送搜索请求
  request.get('/shop/search', { params: { keyword: this.searchForm.keyword } }).then(response => {
    this.tableData = response.data || []; // 确保响应数据是数组，如果不是则设置为空数组
  }).catch(error => {
    console.error('Error searching shops:', error);
  });
},
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
      }
      this.searchForm.keyword = ''; // 清空搜索框内容
      this.showSearchResults = true; // 重置搜索结果显示状态
      this.loadShops(); // 重新加载数据
    },
    openCreateForm() {
      this.dialogTitle = '新增商店';
      this.formData = { id: null }; // 设置id为null以表示新增操作
      this.dialogVisible1 = true;
    },
    addData() {
      // 新增数据
      request.post('/shop/create', this.formData).then(() => {
        this.$message.success('商店添加成功');
        this.loadShops();
        this.dialogVisible1 = false;
      }).catch(() => {
        this.$message.error('商店添加失败');
      });
    },
    editData(row) {
      // 编辑数据的逻辑，可以根据需要进行实现
      this.dialogTitle = '编辑商店';
      this.formData = { ...row }; // 复制当前行的数据到formData
      this.dialogVisible = true;
    },
    deleteData(index) {
      //console.log(id);
      this.$confirm('确定要删除这条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.tableData[index].shopId; // 获取当前行的id
        request.delete(`/shop/delete/${id}`).then(() => {
          this.$message.success('数据删除成功');
          this.loadShops();
        }).catch(() => {
          this.$message.error('数据删除失败');
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
};

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  text-align: initial;
  border: 1px solid black;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight:bold;
}

.el-aside{
  background-color: rgb(238, 241, 246);
  width:150px;
  height: auto;
  border:1px solid black;

}
.el-main{
  border:1px solid black;

}
.el-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}
.large-icon {
  font-size: 24px; /* 调整为合适的大小 */
  font-weight: bold;
}

</style>
